在寫React的時候其實有分為兩種寫法

1. Class Component

   • this.state or this.props會改變
   • 較複雜的情境可以使用，因為有比較多的生命週期可以操作

2. Function Component

   • 程式碼比較簡潔
   • 編譯的速度比較快
   • 比較好寫測試
   • 架構上要切割乾淨 (元件生命週期比較單純)

這篇我們就要來講關於Class Component的生命週期啦~

首先，Class Component的生命週期有三種狀態

1. Mounting: 頁面上已經插入真實的DOM
2. Updating: 頁面正在被重新渲染
3. Unmounting: 頁面已經移出真實的DOM

再來是React針對這三種生命週期狀態提供的Functions (以下是小菜鳥在開發時比較常用的幾種)

1. componentWillMount: 在頁面被渲染出來前但已經插入真實的DOM後執行
2. componentDidMount: 在頁面被渲染出來後執行 (但只會執行一次)
3. componentDidUpdate: 在頁面每次被重新渲染後(props或state有更新後)執行
4. componentWillUnmount: 在頁面要被銷毀時執行

第1~3個都是可以使用this.setState的 (也就是可以在裡面更新state)

如果有要進行ajax非同步處理，建議在componentDidMount進行處理，
有時候小菜鳥想先取得一些必須透過ajax問回來的資料，就會在這邊進行。

當然，除了上述四個以外，還有其他的生命週期functions，
最最最主要的是建構子，相對於function Component來說，
建構子是Class Component 獨特的存在，會直接切一塊記憶體來初始化state和父類別的props。

生命週期參考文件 :

上述，是關於Class Component和Function Component的簡單比較及Class Component 小菜鳥常用的幾個生命週期。

下一篇就要來說明React的另一種寫法 => Function Component啦 ୧☉□☉୨